<template>
  <div class="list" list>
    <div class="live-tab">
      <table>
        <tr>
          <th>直播日期</th>
          <th>主题</th>
          <!-- <th>参与人数</th> -->
          <th>查看详情</th>
        </tr>
        <tr v-for="(item, index) in viewData" :key="index">
          <td>{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}</td>
          <td>{{item.topicName}}</td>
          <!-- <td>{{item.number}}</td> -->
          <td>
            <a href="javascript: void(0)" @click="$router.push(`/liveRoom?roomId=${item.roomId}`)">点击进入</a>
          </td>
        </tr>
      </table>
    </div>
    <button v-if="total > viewData.length" class="load-more ftz16" @click="loadMore">
      <template v-if="loading">
        <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
        <span>正在加载，请稍候......</span>
      </template>
      <span v-else>点击加载更多...</span>
    </button>
    <button class="load-more ftz16" v-if="total===viewData.length">数据已经全部加载</button>
  </div>
</template>
<script>
// import $ from 'jquery'
import NavBar from '@/components/nav-bar'
import SideBar2 from '@/components/side-bar2'
import Footer from '@/components/footer'
import Laypage from '@/components/laypage'
import { mapState } from 'vuex'
// import CryptoJS from 'crypto-js'
import * as api from '@/service/api'
// import cookie from '@/utils/cookie'
export default {
  components: {
    NavBar,
    Footer,
    SideBar2,
    Laypage
  },
  data () {
    return {
      viewData: [],
      total: null,
      searchData: {
        pageNum: 1,
        pageSize: 10,
        userId: this.$route.params.id
      },
      loading: false
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      me: state => state.me
    })
  },
  created () {
    this.getMyLive()
  },
  methods: {
    loadMore () {
      this.searchData.pageNum = this.searchData.pageNum + 1
      this.getMyLive()
    },
    async getMyLive () {
      this.loading = true
      let res = await api.getMyLive({ ...this.searchData })
      if (this.searchData.pageNum === 1) {
        this.viewData = res.data.list
      } else {
        this.viewData = this.viewData.concat(res.data.list)
      }
      this.total = res.data.total
      this.loading = false
    }
  }
}
</script>
<style lang="scss">
@import "../../style/res/investment";
</style>
